<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				/* 一会还要给box进行旋转，直接给body加 */
				perspective: 350px;
			}
			.box {
				position: relative;
				width: 300px;
				height: 300px;
				margin: 100px auto;
				transition: all 1s;
				transform-style: preserve-3d;
			}
			.box:hover {
				transform: rotateY(180deg);
			}
			.front,
			.back {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				font-size: 30px;
				color: black;
				text-align: center;
				line-height: 300px;
			}
			.front {
				background-color: #EE82EE;
				z-index: 1;
			}
			.back {
				background-color: #FFD700;
				transform: rotateY(180deg);
			}
		</style>
	</head>
	<body>
		<!-- 
		 往外面是Z轴，都是正值
		 往下面是y轴，都是正值
		 往右边是x轴，都是正值
		 
		 （1）3D移动和3D旋转
		 透视：perspective：200px
		 透视写到被观察元素的父盒子上
		 
		 （2）3D呈现：transform-style默认不开启3D立体空间
		 transform-style：preserve-3d
		 写在父级
		 
		 （3）简写：transform：translate3d（x，y，z）；注意xyz不能省略
		 
		 -->
		 <div class="box">
		 	 <div class="front">
		 	 	黑马程序员
		 	 </div>
			 <div class="back">
			 	程序猿的烦恼
			 </div>
		 </div>
	</body>
</html>
